<template>
  <div class="goodsinfo-container">

		<!-- 图片轮播图 -->
    <div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<swiper-imgs :swiperImgList="imgslist" :isfull="false"></swiper-imgs>
				</div>
			</div>
		</div>

		<!-- 物品价格和用户操作区域 -->
    <div class="mui-card">
			<div class="mui-card-header">{{ goodsinfo.title }}</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<div class="price-no">
						<span>市场价:<del>￥{{ goodsinfo.old_price }}</del></span>&nbsp;&nbsp;&nbsp;<span>销售价:<h3>￥{{ goodsinfo.now_price }}</h3></span>
					</div>

					<!-- 数字模板 -->
					<div class="num-paied">
						<span>购买数量：</span>
							<num-box @getnumcount="getCount" :maxNum="goodsinfo.have_num"></num-box>
					</div>


					<mt-button type="primary" size="small">立即购买</mt-button>
					<mt-button type="danger" size="small" @click="addShopCar">加入购物车</mt-button>
				</div>
			</div>
		</div>

		<!-- 商品参数 -->
    <div class="mui-card">
			<div class="mui-card-header">商品参数</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p>商品型号：{{ goodsinfo.goods_model }}</p>
					<p>库存情况：{{ goodsinfo.have_num }}件</p>
					<p>上架时间：{{ goodsinfo.add_time }}</p>
				</div>
			</div>
			<div class="mui-card-footer">
				<mt-button type="primary" size="large" plain @click="toGoodsMore">图文介绍</mt-button>
				<mt-button type="danger" size="large" plain @click="toGoodsMoment">商品评论</mt-button>
			</div>
		</div>

		<!-- 加入购物车小球动画 -->
		<transition
			@before-enter="beforeEnter"
			@enter="enter"
			@after-enter="afterEnter"
		>
			<div class="ball-transition" v-show="ballflag" ref="ball"></div>
		</transition>
		
  </div>
</template>

<script>
import SwiperImgs from '../subcomponents/swiperimgs.vue';

import NumBox from '../subcomponents/numbox.vue';

export default {
  data() {
    return {
			id: this.$route.params.id,
			imgslist: [],
			goodsinfo: {},
			ballflag: false,
			buynum: 1
    }
  },
  created() {
		this.getImgsList();
	},
	methods: {
		getImgsList() {
			this.$http.get('./../../../api/goddsinfo.json?id=' + this.id).then(res => {
				console.log(res)
				if(res.body.status === 0) {
					this.goodsinfo = res.body.message
					this.imgslist = res.body.message.imgs;
				}else {
					alert('error');
				}
			})
		},
		toGoodsMore() {
			this.$router.push({ name: 'goodsmore', params: { id: this.id } })
		},
		toGoodsMoment() {
			this.$router.push({ name: 'goodsmoment', params: { id: this.id } })
		},


		//小球动画
		addShopCar() {
			this.ballflag = !this.ballflag;

			var goodsInfo = {
				id: this.id,
				count: this.buynum,
				price: this.goodsinfo.now_price,
				selected: true
			}

			console.log(goodsInfo.count)

			this.$store.commit('addgoodsinfo', goodsInfo);
		},
		beforeEnter(el) {
			el.style.transform = 'translate(0, 0)';
		},
		enter(el, done) {
			el.offsetHeight;

			//动态获取小球在页面中的位置
			const ballPosition = this.$refs.ball.getBoundingClientRect();

			//动态获取底部购物车按钮数字显示的位置
			const badgePosition = document.getElementById("badge").getBoundingClientRect();

			const XX = badgePosition.left - ballPosition.left;
			const YY = badgePosition.top - ballPosition.top;

			el.style.transform = `translate(${XX}px, ${YY}px)`;
			el.style.transition = "all .5s cubic-bezier(0.64,-0.3,0.5,-0.18)";
			done();
		},
		afterEnter(el) {
			this.ballflag = !this.ballflag; 
		},	



		getCount(num) {
			this.buynum = num;
		}
	},
	components: {
		'swiper-imgs': SwiperImgs,
		'num-box': NumBox
  }
}
</script>

<style scoped>
  .goodsinfo-container {
    background-color: #eee;
    overflow: hidden; 
  }

	.price-no {
		font-size: 16px;
		color: #A0A0A0;
	}
	.price-no h3 {
		color: red;
		display: inline;
	}
	.price-no del {
		text-decoration: line-through;
	}
	.num-paied {
		font-size: 16px;
		margin: 15px 0;
		color: #A0A0A0;
		display: flex;
		align-items: center;
	}

	.mui-card-footer {
		display: block
	}

	.mui-card-footer button{
		margin: 10px 0;
	}

	.ball-transition {
		width: 15px;
		height: 15px;
		position: absolute;
		top: 398px;
		left: 158px;
		background-color: red;
		z-index: 99;
		border-radius: 50%;
		transition:0.5s all cubic-bezier(0,1,1,0)
	}
</style>
